<template>
  <div class="app-container">
    <el-form label-width="80px" :model="newFrom">
      <template v-for="item in list">
        <el-form-item v-if="item.type=='bool'" :label="item.name">
            <el-switch v-model="newFrom[item.id]" :value="item.value"></el-switch>
        </el-form-item>
        <el-form-item v-if="item.type=='int'">
          <div class="block">
                <span class="demonstration">{{item.name}}</span><br>
                <el-slider
                    v-model="newFrom[item.id]" 
                    :value="item.value"
                    show-input>
                </el-slider>
          </div>
        </el-form-item>

        <el-form-item v-if="item.type=='str'" >
          <span class="demonstration">{{item.name}}</span><br>
          <el-input v-model="newFrom[item.id]" :value="item.value" ></el-input>
          <!--          <el-input v-model="newFrom.item.id"></el-input>-->
        </el-form-item>
        <el-form-item v-if="item.type=='select'" :label="item.name">
          <!-- <el-select @change="selectTrigger(item)" v-model="newFrom[item.id]" :placeholder="item.value"> -->
          <el-select v-model="newFrom[item.id]" :placeholder="item.value">
            <template v-for="i in item.content1">
              <el-option  :label="i.lable" :value="i.value"></el-option>
            </template>
          </el-select>
        </el-form-item>

        <el-form-item :label="item.name" v-if="item.type=='date'">
          <el-date-picker type="date" placeholder="选择日期" v-model="newFrom[item.id]" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item :label="item.name" v-if="item.type=='checkbox'">
          <el-checkbox-group v-model="newFrom[item.id]">
            <template v-for="i in item.content1">
              <el-checkbox :label="i.lable" name="type" :value="i.value"></el-checkbox>
            </template>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item :label="item.name" v-if="item.type=='radio'">
          <el-radio-group v-model="newFrom[item.id]">
            <template v-for="i in item.content1">
              <el-radio :label="i"></el-radio>
            </template>
          </el-radio-group>
        </el-form-item>
      </template>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">绘制图表</el-button>
        <!-- <el-button type="primary" @click="onCancel">Cancel</el-button> -->
        <el-button type="primary" @click="selectChange">加载表单选项</el-button>
      </el-form-item>
    </el-form>
    <br>
    <el-form label-width="80px" :model="myFrom">
      <template v-for="item in files">
        <el-form-item>
        <el-table-column align="left">
          <el-select v-model="myFrom[item.id]" placeholder="请选择你的数据文件">
            <template v-for="i in item.content1">
              <el-option  :label="i.lable" :value="i.value"></el-option>
            </template>
          </el-select>
        </el-table-column >
        <span>
          <p></p>
        </span>
        <el-table-column align="left">
            <el-button type="primary" @click="loadMyForm">使用我的数据绘制表单选项</el-button>
        </el-table-column>
        </el-form-item>
      </template>
    </el-form>
    <br>
    <div>
      <iframe
        class="iframe"
        id="IframeHTMLInfo"
        :srcdoc="srcdoc"
        frameborder="0"
        style="transform-origin: 0 0"
        width="95%"
        height="720px"
      />
    </div>
    
  </div>
</template>

<script>
import { chart_form_ui } from "@/api/chart_json";
import { chart_form_ui_post } from "@/api/chart_json";
import { chart_form_view } from "@/api/chart_json";
import { select_my_data } from "@/api/chart_json";

  export default {
    data() {
      return {
        list: [
              {'content1': [{'lable': 'area', 'value': 'area'},
              {'lable': 'bar', 'value': 'bar'},
              {'lable': 'column', 'value': 'column'},
              {'lable': 'gauge', 'value': 'gauge'},
              {'lable': 'line', 'value': 'line'},
              {'lable': 'liquid', 'value': 'liquid'},
              {'lable': 'pie', 'value': 'pie'},
              {'lable': 'scatter', 'value': 'scatter'}],
              'id': 'chart',
              'name': '图表类型',
              'placeholder': '请选择要查看的图表',
              'type': 'select',
              'value': 'area'}
        ],
        files: [
        ],
        newFrom: {},
        myFrom: {},
        srcdoc: "",
        token: ""
      }
    },
    created () {
      // var key = encodeURIComponent('/auth/info')
      // this.$data.token = this.getCookie(key)
      this.getForm()
      this.selectChange()
      this.loadMyData()
    },
    methods: {
      // 根据表单数据绘制图表
      onSubmit() {
        this.$message('开始绘制!')
        var form_json = {}
        for(var i in this.newFrom){
            // if(i=="chart") continue;
            // console.log(i,this.newFrom[i])
            form_json[i] = this.newFrom[i]
        }
        // console.log(form_json)
        
        var file_name = ""
        file_name = this.myFrom['files']
        try {
          file_name = this.myFrom['files']
        }
        catch(err){
            file_name = ""
        }
        if (file_name=="undefined")
        {console.log("file_name"+file_name,typeof(file_name))
          file_name = ""}
          
        chart_form_view(form_json, this.newFrom['chart'], this.myFrom['files']).then((response) => {
          this.$data.srcdoc = response.html;
          this.$message({
            message: "当前图表生成完成",
            type: "success",
          });
        });
      },
      // 使用我的数据绘制表单
      loadMyForm(){
        // var form_json = {}
        // for(var i in this.myFrom){
        //     form_json[i] = this.myFrom[i]
        // }
        this.selectChange()
        chart_form_ui_post(this.newFrom['chart'], this.myFrom['files']).then((response) => {
            this.$data.list = response.data;
            this.getForm()
            this.$message({
            message: response.message,
            type: "success",
          });
        });
        

      },
      loadMyData(){
        select_my_data().then((response) => {
          // console.log(response.data)
          this.$data.files = response.data
          this.$message({
            message: response.message,
            type: "success",
          });
        });
      },
      
      // 绘制form表单
      getForm () {
          // debugger
          for (var i = 0; i < this.list.length; i++) {
            // console.log(this.list[i].type == 'checkbox')
            // console.log(this.list[i].value)
            if (this.list[i].type == 'checkbox') {
              this.$set(this.newFrom, this.list[i].id,[])

              // this.newFrom[this.list[i].type] = []
            } else {
              this.$set(this.newFrom, this.list[i].id, this.list[i].value)
              // this.newFrom[this.list[i].type] = this.list[i].value
            }
          }
      },
      // 切换表单绘制数据
      selectChange(){
        chart_form_ui(
          this.newFrom['chart']
        ).then((response) => {
          // console.log(response);
          this.$data.list = response.data;
          this.$message({
            message: "当前Form选项已生成",
            type: "success",
          });
          this.getForm()
        });
      }

    }
  }
</script>

<style scoped>
.line{
  text-align: center;
}

</style>

